<script lang="ts">
import AdminNavi from "@/components/AdminNavi.vue";
import {onMounted, ref} from "vue";
import request from "@/utils/request";
export default {
  components:{
    'navi':AdminNavi
  },
  setup(){
    const list=ref([])
    const total = ref('')

    onMounted(()=>{
      pagehelper()
    })


    const params = ref({
      page: 1,
      size: 10
    })
    const pagehelper = async() => {
      const res=await request.get(`/adminOrder/${params.value.page}/${params.value.size}`)
      console.log(res.data)
      list.value=res.data.data.records
      total.value =res.data.data.total
    }

    const handleSizeChange = (val: number) => {
      console.log(`每页 ${val} 条`)
      params.value.size = val
      pagehelper()
    }

    const handleCurrentChange = (val: number) => {
      console.log(`当前页: ${val}`)
      params.value.page = val
      pagehelper()
    }

    return{
      list,
      total,
      handleSizeChange,
      handleCurrentChange,
      params
    }
  }

}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px"><navi/></el-aside>
      <el-main>
        <el-table :data="list" border style="width: 100%;margin-top: 50px" >
          <el-table-column label="订单创建日期" prop="orderCreateTime" min-width="50%"/>
          <el-table-column label="订单编号" prop="orderNumber"/>
          <el-table-column label="支付宝交易号" prop="alipayNumber" />
          <el-table-column label="价格" prop="orderPrice"/>
          <el-table-column label="状态" prop="status"/>
          </el-table>
        <el-pagination class="page"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="this.params.page"
                       :page-sizes="10"
                       :page-size="this.params.size"
                       layout=" prev, pager, next, jumper"
                       :total="this.total">
        </el-pagination>
      </el-main>
    </el-container>
  </div>


</template>

<style scoped>
.page{
  position: fixed;
  bottom:180px;
}
</style>